<template>
  <div id="intfconfig">
    <Splitpanes style="height: 100%">
      <Pane :size="modulepane">
        <vxe-toolbar perfect ref="toolbarRef">
          <template #buttons>
            <vxe-input
              clearable
              placeholder="关键字查询"
              v-model="modulekeywords"
              @search-click="getModuleList"
              @keyup="keyup"
              type="search"
            ></vxe-input>
            <!-- <vxe-button
              type="text"
              class="button-blue"
              icon="vxe-icon-refresh"
              content="刷新"
              @click="getModuleList"
            ></vxe-button>-->
          </template>
        </vxe-toolbar>
        <div class="sampleType">
          <el-tree
            :expand-on-click-node="false"
            :default-expand-all="true"
            :data="
              moduleList.filter(
                (data) =>
                  !modulekeywords ||
                  data.code.includes(modulekeywords) ||
                  data.name.includes(modulekeywords)
              )
            "
            :props="defaultProps"
            node-key="id"
            ref="dataTreeRef"
            highlight-current
            class="tools-tree"
            @node-click="handleClickModule"
            v-loading="moduleshowLoading"
          ></el-tree>
        </div>
      </Pane>
      <Pane :size="intfpane">
        <vxe-toolbar perfect>
          <template #buttons>
            <vxe-input
              clearable
              placeholder="关键字查询"
              v-model="keywords"
              @keyup="keyup"
              type="search"
            ></vxe-input>
            <vxe-button
              type="text"
              status="primary"
              icon="vxe-icon-refresh"
              content="刷新"
              @click="handleSearch"
            ></vxe-button>
            <vxe-button
              type="text"
              status="success"
              icon="vxe-icon-square-plus"
              content="新建"
              :disabled="!currModuleId"
              @click="handleAdd"
            ></vxe-button>
            <vxe-button
              type="text"
              icon="vxe-icon-copy"
              content="复制"
              :disabled="!currModuleId"
              @click="copydialogVisible = true"
            ></vxe-button>
            <!-- <vxe-button
              type="text"
              icon="vxe-icon-save"
              content="保存"
              class="text-cyan"
              @click="saveList"
            ></vxe-button>-->
            <vxe-button
              type="text"
              status="danger"
              icon="vxe-icon-delete"
              content="删除"
              @click="handleDelete"
            ></vxe-button>
          </template>
        </vxe-toolbar>
        <div class="modulTable">
          <vxe-table
            ref="moduleTable"
            v-loading="loading"
            :loading="loading"
            :height="conHeight - 150 + 'px'"
            border
            :data="
              intfMainList.filter(
                (data) => !keywords || data.code.includes(keywords) || data.name.includes(keywords)
              )
            "
            @current-change="moduleRowClick"
            :row-config="{ isCurrent: true, isHover: true }"
            :keyboard-config="{
              isArrow: true,
              isTab: true,
              isEdit: true
            }"
            @cell-dblclick="editRow"
            :edit-rules="formRule"
            resizable
            show-overflow
            keep-source
          >
            <vxe-column type="checkbox" width="26" align="center"></vxe-column>
            <vxe-column type="seq" title="序号" width="30" align="center"></vxe-column>
            <vxe-column
              field="code"
              title="编码"
              width="100"
              :edit-render="{ autofocus: '.vxe-input--inner' }"
            >
              <template #edit="{ row, rowIndex, column }">
                <vxe-input
                  v-model="row.code"
                  type="text"
                  @keydown.enter="enterEvent(row, rowIndex, column)"
                ></vxe-input>
              </template>
            </vxe-column>
            <vxe-column
              field="name"
              title="名称"
              min-width="120px"
              :edit-render="{ autofocus: '.vxe-input--inner' }"
            >
              <template #edit="{ row, rowIndex, column }">
                <vxe-input
                  v-model="row.name"
                  type="text"
                  @keydown.enter="enterEvent(row, rowIndex, column)"
                ></vxe-input>
              </template>
            </vxe-column>
            <vxe-column
              field="module"
              title="模块"
              width="100"
              :edit-render="{ autofocus: '.vxe-input--inner' }"
            >
              <template #default="{ row }">
                <span>{{ formatModule(row.module) }}</span>
              </template>
            </vxe-column>
            <vxe-column
              field="type"
              title="类型"
              width="100"
              :edit-render="{ autofocus: '.vxe-input--inner' }"
            >
              <template #default="{ row }">
                <span>{{ formatCommon(intfTypeDict, row.type) }}</span>
              </template>
            </vxe-column>
            <vxe-column
              field="sn"
              title="顺序"
              width="50"
              :edit-render="{ autofocus: '.vxe-input--inner' }"
            >
              <template #edit="{ row, rowIndex, column }">
                <vxe-input
                  v-model="row.sn"
                  type="text"
                  @keydown.enter="enterEvent(row, rowIndex, column)"
                ></vxe-input>
              </template>
            </vxe-column>
            <vxe-column
              field="state"
              title="状态"
              width="50"
              :edit-render="{ autofocus: '.vxe-input--inner' }"
            >
              <template #default="{ row }">
                <span>{{ formatCommon(stateDict, row.state) }}</span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </Pane>
      <Pane :size="intfitempane">
        <CompIntfItemConfig :intfs="intfMainList" :intfId="mainform.id" v-if="isitemshow" />
      </Pane>
    </Splitpanes>
    <!-- 新增/编辑接口  -->
    <el-dialog
      v-model="maindialogVisible"
      :title="mainform.id ? '编辑接口' : '新建接口'"
      width="60%"
    >
      <el-form :model="mainform" label-width="100px">
        <Splitpanes style="height: 100%">
          <Pane size="50">
            <el-form-item label="ID">
              <el-input v-model="mainform.id" disabled />
            </el-form-item>
            <el-form-item label="模块">
              <el-select v-model="mainform.module" placeholder="请选择" clearable disabled>
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="item in moduleList"
                  :key="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="编码">
              <el-input v-model="mainform.code" />
            </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="mainform.name" />
            </el-form-item>
            <el-form-item label="类型">
              <el-select v-model="mainform.type" placeholder="请选择" clearable>
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in intfTypeDict"
                  :key="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="顺序">
              <el-input-number v-model="mainform.sn" :min="1" />
            </el-form-item>
            <el-form-item label="启用">
              <el-select v-model="mainform.state" placeholder="请选择" clearable>
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in stateDict"
                  :key="item.value"
                />
              </el-select>
            </el-form-item>
          </Pane>
          <Pane size="50">
            <el-tabs :model-value="mainform.type" class="demo-tabs">
              <el-tab-pane label="数据库" name="db">
                <el-form-item label="数据库类型">
                  <el-select v-model="mainform.dbType" placeholder="请选择" clearable>
                    <el-option
                      :label="item.label"
                      :value="item.value"
                      v-for="item in dbTypeDict"
                      :key="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="数据库地址">
                  <el-input v-model="mainform.dbAddr" />
                </el-form-item>
                <el-form-item label="数据库名称">
                  <el-input v-model="mainform.dbName" />
                </el-form-item>
                <el-form-item label="登录账号">
                  <el-input v-model="mainform.dbUsername" />
                </el-form-item>
                <el-form-item label="登录密码">
                  <el-input v-model="mainform.dbPassword" />
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="服务" name="serve">
                <el-form-item label="服务类型">
                  <el-select v-model="mainform.serveType" placeholder="请选择" clearable>
                    <el-option
                      :label="item.label"
                      :value="item.value"
                      v-for="item in serveTypeDict"
                      :key="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="服务地址">
                  <el-input v-model="mainform.serveAddr" />
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </Pane>
        </Splitpanes>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="maindialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveRow">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 复制接口  -->
    <el-dialog v-model="copydialogVisible" title="复制接口" width="60%" @open="openCopyDialog">
      <Splitpanes style="height: 100%">
        <Pane size="30">
          <div class="sampleType">
            <el-tree
              :data="orgList"
              :props="defaultProps"
              :expand-on-click-node="false"
              :default-expand-all="true"
              @node-click="handleOrgNodeClick"
              highlight-current
              ref="orgTreeRef"
              node-key="id"
              class="tools-tree"
              v-loading="orgloading"
            ></el-tree>
          </div>
        </Pane>
        <Pane size="30">
          <div class="sampleType">
            <el-tree
              :expand-on-click-node="false"
              :default-expand-all="true"
              :data="orgModuleList"
              :props="defaultProps"
              node-key="id"
              ref="orgModuleTreeRef"
              @node-click="handleOrgModuleNodeClick"
              highlight-current
              class="tools-tree"
              v-loading="orgModuleLoading"
            ></el-tree>
          </div>
        </Pane>
        <Pane size="40">
          <vxe-table
            ref="copyModuleTable"
            v-loading="orgModuleIntfLoading"
            :loading="orgModuleIntfLoading"
            border
            :data="orgModuleIntfList"
            :row-config="{ isCurrent: true, isHover: true }"
            resizable
            show-overflow
            keep-source
            @checkbox-change="selectChangeEvent"
          >
            <vxe-column type="checkbox" width="26" align="center"></vxe-column>
            <vxe-column field="code" title="编码"></vxe-column>
            <vxe-column field="name" title="名称"></vxe-column>
          </vxe-table>
        </Pane>
      </Splitpanes>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="copydialogVisible = false" :disabled="copyIntfLoading">取消</el-button>
          <el-button type="primary" @click="copyIntfs" :disabled="copyIntfLoading">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { ElMessage } from 'element-plus';
// import { fa } from 'element-plus/es/locale';
import { VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息
import { AppStore } from '../../../stores/store';
// import saveAs from 'file-saver';
import CompIntfItemConfig from './CompIntfItemConfig.vue'; //接口配置
let store = AppStore();
let { proxy }: any = getCurrentInstance();
let modulePoitPre = reactive([]);
const stateDict = ref([
  { label: '未启用', value: 0 },
  { label: '启用', value: 1 }
]);
const intfTypeDict = ref([
  { label: '数据库', value: 'db' },
  { label: '服务', value: 'serve' }
]);
const dbTypeDict = ref([
  { label: 'SQLServer', value: 'SQLServer' },
  { label: 'Oracle', value: 'Oracle' },
  { label: 'MySQL', value: 'MySQL' },
  { label: 'PostgreSQL', value: 'PostgreSQL' }
]);
const serveTypeDict = ref([
  { label: 'HTTP', value: 'HTTP' },
  { label: 'SOAP', value: 'SOAP' }
]);
function formatCommon(arr, value) {
  for (const item of arr) {
    if (item.value == value) {
      return item.label;
    }
  }
}
function formatModule(value) {
  for (const item of moduleList) {
    if (item.id == value) {
      return item.name;
    }
  }
}
// 当前屏幕高度
let conHeight = ref(document.documentElement.clientHeight || document.body.clientHeight);
let modulepane = ref('15');
let intfpane = ref('85');
let intfitempane = ref('0');
let isitemshow = ref(false);
//关键字
let keywords = ref('');
let loading = ref(false);
let copydialogVisible = ref(false);
// 接口表格数据
let intfMainList = reactive([]);
let maindialogVisible = ref(false);
let mainform = reactive({
  id: '',
  orgId: '',
  code: '', //编码
  name: '', //名称
  module: '', //所属模块
  type: '', //类型 数据库/服务
  state: 0, //状态 禁用/调试/启用
  sn: intfMainList.length + 1, //排序号
  //数据库
  dbType: '', //数据库类型
  dbAddr: '', //数据库地址
  dbName: '', //数据库名称
  dbUsername: '', //账号
  dbPassword: '', //密码
  //服务
  serveType: '', //服务类型
  serveAddr: '' //服务地址
});

onMounted(() => {
  getModuleList();
  handleSearch();
});

// 点击刷新
// function handleSearch() {
//   loading.value = true;
//   intfMainList.length = 0;
//   let str = localStorage.getItem('intfMainList');
//   if (str) {
//     intfMainList.push(...JSON.parse(str));
//   }

//   setTimeout(() => {
//     loading.value = false;
//   }, 500);
// }
function handleSearch() {
  loading.value = true;
  isitemshow.value = false;
  modulepane.value = '15';
  intfpane.value = '85';
  intfitempane.value = '0';
  let intfParam = reactive({
    module: currModuleId.value
  });
  intfMainList.length = 0; //放入数据前清空数组
  proxy.$http.post('/api/sys/getIntfList', intfParam).then((res: any) => {
    if (res.status.code === 1) {
      loading.value = false;
      intfMainList.push(...res.data.sysIntfList);
      // if (moduleList.length > 0) {
      //   handleClickModule(moduleList[0], null, null);
      // }
    } else {
      VXETable.modal.message({ content: res.status.msg, status: 'error' });
      return;
    }
  });
}
//新建
async function handleAdd() {
  clearmainform();
  maindialogVisible.value = true;
  // intfMainList.push(record);
}
// async function saveRow() {
//   if (!mainform.id) {
//     mainform.id = '2000' + mainform.sn;
//     intfMainList.push(mainform);
//   } else {
//     for (let i = intfMainList.length - 1; i >= 0; i--) {
//       if (mainform.id == intfMainList[i].id) {
//         setvalue(intfMainList[i], mainform);
//         break;
//       }
//     }
//   }
//   localStorage.setItem('intfMainList', JSON.stringify(intfMainList));
//   VXETable.modal.message({ content: '操作成功', status: 'success' });
//   maindialogVisible.value = false;
//   setTimeout(() => {
//     handleSearch();
//   }, 500);
// }
async function saveRow() {
  if (mainform.id) {
    proxy.$http
      .post('/api/sys/editIntf', mainform)
      .then((res: any) => {
        if (res.status.code === 1) {
          handleSearch();
          maindialogVisible.value = false;
          VXETable.modal.message({ content: '修改成功', status: 'success' });
        }
      })
      .catch((err: any) => {
        VXETable.modal.message({ content: '修改成功', status: 'error' });
      });
  } else {
    proxy.$http
      .post('/api/sys/addIntf', mainform)
      .then((res: any) => {
        if (res.status.code === 1) {
          handleSearch();
          maindialogVisible.value = false;
          VXETable.modal.message({ content: '创建成功', status: 'success' });
        }
      })
      .catch((err: any) => {
        VXETable.modal.message({ content: '创建异常', status: 'error' });
      });
  }
}
async function editRow({ row }) {
  clearmainform();
  setvalue(mainform, row);
  maindialogVisible.value = true;
}
function setvalue(form, row) {
  form.id = row.id;
  form.orgId = row.orgId;
  (form.code = row.code), //编码
    (form.name = row.name), //名称
    (form.module = row.module), //所属模块
    (form.type = row.type), //类型 数据库/服务
    (form.state = row.state), //状态 禁用/调试/启用
    (form.sn = row.sn), //排序号
    //数据库
    (form.dbType = row.dbType), //数据库类型
    (form.dbAddr = row.dbAddr), //数据库地址
    (form.dbName = row.dbName), //数据库名称
    (form.dbUsername = row.dbUsername), //账号
    (form.dbPassword = row.dbPassword), //密码
    //服务
    (form.serveType = row.serveType), //服务类型
    (form.serveAddr = row.serveAddr); //服务地址
}
function clearmainform() {
  mainform.id = '';
  mainform.orgId = '';
  (mainform.code = ''), //编码
    (mainform.name = ''), //名称
    (mainform.module = currModuleId.value), //所属模块
    (mainform.type = ''), //类型 数据库/服务
    (mainform.state = 0), //状态 禁用/调试/启用
    (mainform.sn = intfMainList.length + 1), //排序号
    //数据库
    (mainform.dbType = ''), //数据库类型
    (mainform.dbAddr = ''), //数据库地址
    (mainform.dbName = ''), //数据库名称
    (mainform.dbUsername = ''), //账号
    (mainform.dbPassword = ''), //密码
    //服务
    (mainform.serveType = ''), //服务类型
    (mainform.serveAddr = ''); //服务地址
}
// 点击修改保存
async function saveList() {
  // 获取表格实例
  let $Xtable = proxy.$refs.moduleTable;

  if ($Xtable) {
    // 表格实例表用该方法拿到有id的为修改
    const updateRecords = await $Xtable.getUpdateRecords().filter((p: any) => {
      return p.id !== '';
    });

    // const InsertRecords = await $Xtable.getInsertRecords().filter((m: any) => {
    //   return m.id === '';
    // });
    // 拿到数组中没有id的数据为新增
    const InsertRecords = intfMainList.filter((e) => {
      return e.id === '';
    });


    // 遍历发起请求  将筛选出有id的每一个对象（修改过的） 作为参数传递给后端
    updateRecords.forEach((e) => {
      let moduleAddParam = e;
    });

    // 新增
    InsertRecords.forEach((e) => {
      const moduleAddParam = e;
      moduleAddParam.id = '1';
    });
    // localStorage.setItem('activeIndex', JSON.parse(JSON.stringify(this.intfMainList)));
    localStorage.setItem('intfMainList', JSON.stringify(intfMainList));
    VXETable.modal.message({ content: '操作成功', status: 'success' });
    setTimeout(() => {
      handleSearch();
    }, 500);
  } else {
    return;
  }
}
// 点击删除
async function handleDelete() {
  let $Xtable = proxy.$refs.moduleTable;
  let selectRows = $Xtable.getCheckboxRecords();
  if (selectRows.length > 1) {
    VxeMessage('只能删除一条数据', VxeNotifyType.warning);
    return;
  }
  if (selectRows <= 0) {
    VXETable.modal.message({ content: `请勾选要删除的数据`, status: 'warning' });
    return;
  } else {
    proxy
      .$confirm('确定删除此接口？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        proxy.$http
          .delete('/api/sys/deleteIntf/' + selectRows[0].id)
          .then((res: any) => {
            if (res.data == null) {
              VXETable.modal.message({ content: res.status.msg, status: 'warning' });
              VxeMessage('删除接口失败', VxeNotifyType.error);
            } else {
              VxeMessage('删除接口成功', VxeNotifyType.success);
              handleSearch();
            }
          })
          .catch((err: any) => {
            VxeMessage('删除异常', VxeNotifyType.error);
          });
      });
  }
}
// 点击行
function moduleRowClick({ row, rowIndex }) {
  if (isitemshow.value) {
    isitemshow.value = false;
  }
  clearmainform();
  setvalue(mainform, row);
  modulepane.value = '15';
  intfpane.value = '20';
  intfitempane.value = '70';
  setTimeout(() => {
    isitemshow.value = true;
  }, 500);
}
// 用户输入关键字
let modulekeywords = ref('');
let moduleshowLoading = ref(false); //模块加载
// 模块功能表格数据
let moduleList: any = reactive([]);
let defaultProps = {
  children: 'children',
  label: 'name'
};
// 请求模块表格数据
function getModuleList() {
  modulekeywords.value = '';
  moduleshowLoading.value = true;
  let modulePageParam = {params:{
    pageIndex: 1,
    pageSize: 9999,
    keywords: ''
  }};
  moduleList.length = 0; //放入数据前清空数组
  proxy.$http.get('/api/sys/getPageModules', modulePageParam).then((res: any) => {
    if (res.status.code === 1) {
      moduleshowLoading.value = false;
      moduleList.push(...res.data.modulePageList.records);
      // if (moduleList.length > 0) {
      //   handleClickModule(moduleList[0], null, null);
      // }
    } else {
      VXETable.modal.message({ content: res.status.msg, status: 'error' });
      return;
    }
  });
}
// 回车触发搜索关键字
function keyup(e) {
  if (e.$event.code == 'Enter') {
    getModuleList();
  }
}
let currModuleId = ref('');
//点击左侧模块
function handleClickModule(obj, node, data) {
  currModuleId.value = obj.id;
  modulepane.value = '15';
  intfpane.value = '85';
  intfitempane.value = '0';
  handleSearch();
}
let orgloading = ref(false);
let orgList: any = reactive([]); //所有的组织机构
function findOrgTree() {
  orgList.length = 0;
  orgloading.value = true;
  const url = '/api/sys/findOrgTree';
  proxy.$http
    .get(url)
    .then((res: any) => {
      if (res.status.code !== 1) {
        proxy.$alert(res.status.msg, '提示');
      } else {
        orgList.push(...res.data.orgTree);
      }
      orgloading.value = false;
    })
    .catch((err: any) => {
      VXETable.modal.message({ content: err.status.msg, status: 'error' });
    });
}
let orgModuleLoading = ref(false); //机构模块加载
let orgModuleList: any = reactive([]); // 机构模块功能表格数据
function handleOrgNodeClick(data: any) {
  orgModuleLoading.value = true;
  let modulePageParam = {params:{
    pageIndex: 1,
    pageSize: 9999,
    orgId: data.id
  }};
  orgModuleList.length = 0; //放入数据前清空数组
  selectCopyIntfList.length = 0;
  proxy.$http.get('/api/sys/getPageModules', modulePageParam).then((res: any) => {
    if (res.status.code === 1) {
      orgModuleLoading.value = false;
      orgModuleList.push(...res.data.modulePageList.records);
      // if (moduleList.length > 0) {
      //   handleClickModule(moduleList[0], null, null);
      // }
    } else {
      VXETable.modal.message({ content: res.status.msg, status: 'error' });
      return;
    }
  });
}
let orgModuleIntfLoading = ref(false); //机构模块加载
let orgModuleIntfList: any = reactive([]); // 机构模块功能表格数据
function handleOrgModuleNodeClick(data: any) {
  orgModuleIntfLoading.value = true;
  let intfParam = reactive({
    module: data.id
  });
  orgModuleIntfList.length = 0; //放入数据前清空数组
  proxy.$http.post('/api/sys/getIntfList', intfParam).then((res: any) => {
    if (res.status.code === 1) {
      orgModuleIntfLoading.value = false;
      orgModuleIntfList.push(...res.data.sysIntfList);
      // if (moduleList.length > 0) {
      //   handleClickModule(moduleList[0], null, null);
      // }
    } else {
      VXETable.modal.message({ content: res.status.msg, status: 'error' });
      return;
    }
  });
}
function openCopyDialog() {
  orgModuleList.length = 0;
  orgModuleIntfList.length = 0;
  selectCopyIntfList.length = 0;
  findOrgTree(); //加载组织机构树
}
let selectCopyIntfList: any = reactive([]); // 选中复制接口
function selectChangeEvent({ $table }) {
  selectCopyIntfList.length = 0;
  const records = $table.getCheckboxRecords();
  console.info(`勾选${records.length}个树形节点`, records);
  selectCopyIntfList.push(...records);
}
let copyIntfLoading = ref(false); //接口复制
//复制
function copyIntfs() {
  if (!currModuleId.value) {
    VxeMessage('未获取选中模块', VxeNotifyType.warning);
    return;
  }
  // if (selectCopyIntfList.length < 1) {
  //   VxeMessage('未获取选中接口', VxeNotifyType.warning);
  //   return;
  // }
  let $Xtable = proxy.$refs.copyModuleTable;
  let selectRows = $Xtable.getCheckboxRecords();
  if (selectRows.length < 1) {
    VxeMessage('未获取选中接口', VxeNotifyType.warning);
    return;
  }
  copyIntfLoading.value = true;
  let intfParam = reactive({
    module: currModuleId.value,
    sysIntfs: selectRows
  });
  orgModuleIntfList.length = 0; //放入数据前清空数组
  proxy.$http.post('/api/sys/copyIntfs', intfParam).then((res: any) => {
    if (res.status.code === 1) {
      copyIntfLoading.value = false;
      copydialogVisible.value = false;
      handleSearch();
    } else {
      copyIntfLoading.value = false;
      VXETable.modal.message({ content: res.status.msg, status: 'error' });
      return;
    }
  });
}
</script>
<style lang="scss" scoped>
#intfconfig {
  .el-form-item {
    margin-right: 10px;
  }
  .el-tabs {
    margin-left: 10px;
  }
  .el-select {
    width: 100%;
  }
  .el-input-number {
    width: 100%;
  }
}
</style>
